<template>
  <Form :model="formState" v-bind="formItemLayout" ref="formRef" name="BasicForm">
    <FormItem name="strategyMethod" label="治理策略类型" :rules="[{ required: true, message: '请选择策略类型' }]">
      <Select v-model:value="formState.strategyMethod" :disabled="isEdit">
        <SelectOption v-for="method in methodList" v-bind:key="method.value" :value="method.value"
          >{{ method.label }}
        </SelectOption>
      </Select>
    </FormItem>
    <div class="md:flex my-5">
      <div class="md:w-1/2">
        <FormItem name="strategyName" label="治理策略名称" :rules="[{ required: true, message: '请选择策略类型' }]">
          <Input v-model:value="formState.strategyName" />
        </FormItem>
      </div>
      <div class="md:w-1/2">
        <FormItem name="scenarioId" label="业务场景" :rules="[{ required: true, message: '请选择业务场景' }]">
          <Select v-model:value="formState.scenarioId" :disabled="isEdit">
            <SelectOption v-for="scenario in scenarioList" v-bind:key="scenario.id" :value="scenario.id">
              {{ scenario.scenarioName }}
            </SelectOption>
          </Select>
        </FormItem>
      </div>
    </div>
  </Form>
</template>

<script lang="ts" setup>
import { Form, FormItem, Select, Input, SelectOption } from 'ant-design-vue';
import { reactive, ref, toRaw, watch } from 'vue';
import { getScenarioList } from '/@/api/maintenance-center/microservice-govern/governance/governance';
import { ValidateErrorEntity } from 'ant-design-vue/es/form/interface';

const formItemLayout = {
  labelCol: {
    flex: '100px',
  },
  wrapperCol: {
    flex: '1',
  },
};

interface FormState {
  id: string;
  strategyMethod: string;
  strategyName: string;
  scenarioId: string;
  scenarioName: string;
}

const scenarioList = ref([]);
let formState = reactive<Record<string, any>>({});
const formRef = ref();
const emit = defineEmits(['submit', 'change', 'success', 'error']);
const isEdit = ref(false);

const methodList = ref([
  {
    label: '限流',
    value: 'rateLimiting',
  },
  {
    label: '重试',
    value: 'retry',
  },
  {
    label: '隔离仓',
    value: 'bulkhead',
  },
  {
    label: '熔断',
    value: 'circuitBreaker',
  },
]);

watch(
  () => formState.strategyMethod,
  async () => {
    if (isEdit.value === false) {
      formState.scenarioId = undefined;
      scenarioList.value = await getScenarioList({ strategyMethod: formState.strategyMethod });
      emit('change', formState.strategyMethod);
    }
  }
);

function getData() {
  return toRaw(formState);
}

async function setData(fieldValue: any) {
  isEdit.value = true;
  formState.id = fieldValue.id;
  formState.strategyMethod = fieldValue.strategyMethod;
  scenarioList.value = await getScenarioList({ strategyMethod: formState.strategyMethod });
  formState.strategyName = fieldValue.strategyName;
  formState.scenarioId = fieldValue.scenarioId;
  formState.scenarioName = fieldValue.scenarioName;
  return formState;
}

function submitHandler() {
  formRef.value
    .validate()
    .then(() => {
      let params = toRaw(formState);
      emit('submit', params);
      emit('success');
      isEdit.value = false;
      formState = undefined;
    })
    .catch((error: ValidateErrorEntity<FormState>) => {
      emit('error', error);
    });
}

defineExpose({ submitHandler, getData, setData });
</script>
